import { Meta, Status, Props, Story } from '../../../../.storybook/components';
import * as Stories from './Display.stories';

<Meta of={Stories} />

# Display

<Status variant="stable" />

The Display component is used to render headings with large typography. Typically, large typography is intended for landing pages. In most cases, the [Headline](Typography/Headline) should be used instead.

<Story of={Stories.Base} />
<Props />

## Component variations

### Sizes

The Display component comes in three sizes. In most cases, use the [Headline component](Typography/Headline) component instead to render headings.

<Story of={Stories.Sizes} />

### Weights

The Display component comes in three weight. Use the default `bold` weight in most cases.

<Story of={Stories.Weights} />

---

## Accessibility

All accessibility guidelines for the [Headline component](Typography/Headline) also apply to the Display component.
